<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="description" content="">
  <meta name="author" content="">
  <title>SB Admin - Start Bootstrap Template</title>
  <!-- Bootstrap core CSS-->
  <link href="/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <!-- Custom fonts for this template-->
  <link href="/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
  <!-- Page level plugin CSS-->
  <link href="/vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet">
  <link href="/vendor/datetimepicker/css/daterangepicker.css" rel="stylesheet" />
  <!-- Custom styles for this template-->
  <link href="/css/sb-admin.css" rel="stylesheet">
  <style>

    .custom-radio{

      padding-top: 7px;
      height: 31px;
    }

  </style>
</head>

<body class="fixed-nav sticky-footer bg-dark" id="page-top">
  <!-- Navigation-->
  <div th:replace="layout/base::top-fragment('tables')"></div>

  <div class="content-wrapper">
    <div class="col-xs-12">
      <div class="card mb-3">

        <div class="card-body">

          <form autocomplete="off" th:action="@{/person}" method="post">
            <input type="hidden" name="_method" value="put" th:if="${person!=null}">
            <input type="hidden" name="id" value="put" th:if="${person!=null}" th:value="${person.id}">
            <div class="form-group row">
              <label for="inputEmail3" class="col-sm-2 col-form-label text-right">用户名</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="inputEmail3" name="name" placeholder="用户名" autocomplete="off" th:value="${person!=null} ?${person.name}">
              </div>
            </div>
            <div class="form-group row">
              <label for="inputPassword3" class="col-sm-2 col-form-label text-right">年龄</label>
              <div class="col-sm-10">
                <input  data-parsley-type="number"
                        th:value="${person}?${person.age}"
                        type="text"
                        name="age"
                        class="form-control"
                        id="inputPassword3"
                        required placeholder="年龄"
                        autocomplete="off">
              </div>
            </div>
            <fieldset class="form-group">
              <div class="row">
                <label class="col-sm-2 col-form-label text-right">性别</label>
                <div class="col-sm-10 custom-radio">
                    <div class="row">
                      <div class="col-sm-1">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio"
                                 name="sex" id="gridRadios1" value="1"
                                 th:checked="${person!=null}?${person.sex == 1}">男
                        </label>
                      </div>
                      <div class="col-sm-1">
                        <label class="form-check-label">
                          <input class="form-check-input" type="radio"
                                 name="sex"
                                 id="gridRadios2"
                                 value="2" th:checked="${person!=null}?${person.sex==2}">女
                        </label>
                      </div>
                    </div>
                </div>
              </div>
            </fieldset>
            <div class="form-group row">
              <div class="col-sm-2 text-right">生日</div>
              <div class="col-sm-10">
                <input name="birthDay" type="text" class="form-control" th:value="${person!=null}?${#dates.format(person.birthDay,'yyyy-MM-dd')}" />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 text-right">个人介绍</label>
              <div class="col-sm-10">
                <textarea required="" name="description" class="form-control" th:text="${person!=null}?${person.description}" th:value="asd"></textarea>
              </div>
            </div>
            <div class="form-group row">
              <div class="col-sm-10 offset-2">
                <input type="submit" class="btn btn-primary btn-sm" th:value="${person}?'更新':'增加'"></input>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>

    <footer class="sticky-footer">
      <div class="container">
        <div class="text-center">
          <small>Copyright © Your Website 2017 / More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></small>
        </div>
      </div>
    </footer>
    <!-- Scroll to Top Button-->
    <a class="scroll-to-top rounded" href="#page-top">
      <i class="fa fa-angle-up"></i>
    </a>
    <!-- Logout Modal-->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Ready to Leave?</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">Select "Logout" below if you are ready to end your current session.</div>
          <div class="modal-footer">
            <button class="btn btn-secondary" type="button" data-dismiss="modal">Cancel</button>
            <a class="btn btn-primary" href="login.html">Logout</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Bootstrap core JavaScript-->
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <!-- Core plugin JavaScript-->
  <script src="/vendor/jquery-easing/jquery.easing.min.js"></script>
  <!-- Page level plugin JavaScript-->
  <script src="/vendor/datatables/jquery.dataTables.js"></script>
  <script src="/vendor/datatables/dataTables.bootstrap4.js"></script>
  <!-- Custom scripts for all pages-->
  <script src="/js/sb-admin.min.js"></script>
  <!-- Custom scripts for this page-->
  <script src="/js/sb-admin-datatables.min.js"></script>

<!--  <link href="/vendor/datetimepicker/css/daterangepicker.css" rel="stylesheet" />-->
  <script src="/vendor/datetimepicker/js/moment.min.js"></script>
  <script src="/vendor/datetimepicker/js/daterangepicker.js"></script>

  <script th:inline="javascript">



  </script>
</body>

</html>
